<template>
	<view class="boxs">
		<view class="secondhand">
			<view class="plotbox">
				<view class="left">
					<text class="plot">客源性质</text>
				</view>
				<view class="cekname" style="display: flex;">
					<view class="show" v-for="(item,index) in arr" :key="index">
						<view class="cu-form-group">
							<radio class='red radio' :class="currentindex3==index?'checked':''"
								:checked="currentindex3==index?true:false" @click="selcthree(index,item)"></radio>
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 联系人 -->
			<BaseContinput :titleItem="titleItem1" :placeholderItem="placeholderItem1" @shuruitem="nameitem">
			</BaseContinput>

			<!-- 联系电话 -->
			<BaseContinput :titleItem="titleItem" :placeholderItem="placeholderItem" @shuruitem="phonitem" type="number"
				verifyNumber="true"></BaseContinput>
			



			<!-- 标签管理 -->
			<view class="plotbox">
				<view class="left">
					<text class="plot">标签管理</text>
				</view>
				<view class="hrs">
					<BaseLabel ref="baseLabel" :arr="biaoqian1" :arr1="selectbiaoqian" @selectItem="selectItem"
						@shuruItem="shuruItem1"></BaseLabel>
				</view>
			</view>


			<!-- 客源备注 -->
			<view class="remark">
				客源备注
			</view>
			<textarea value="" @input="textareaitem" />
		</view>
		<view class="upload" @click="upload">
			上传信息
		</view>
	</view>
</template>

<script>
	import BaseContinput from "../../components/BaseContinput/index.vue"
	import BaseLabel from "../../components/BaseLabel/BaseLabel.vue"

	import {
		getMenu,
		getlabel
	} from '../../api/api/index.js'
	import {
		checkPhone
	} from "../../utils/agent.js"
	export default {
		data() {
			return {
				arr: [{
					text: "二手房"
				}, {
					text: "租房"
				}],
				titleItem: "联系电话",
				placeholderItem: "请输入客户联系电话",
				titleItem1: "联系人",
				placeholderItem1: "请输入客户姓名",
				biaoqian1: [],
				selectbiaoqian: [],
				currentindex3: 0,
				currentindex4: 0,
				type: "二手房",
				userphone: "",
				lastname: "",
				lable: [],
				remark: "",
				sex: "男",
				sexarr: [{
					sex: "男"
				}, {
					sex: "女"
				}],
				types: 1
			}
		},
		methods: {
			selcthree(index, item) {
				this.type = item.text
				this.currentindex3 = index
				if (item.text == "二手房") {
					getlabel({
						type: 1
					}).then(res => {
						this.biaoqian = res.data.map(v => {
							v.text = v.name
							return v
						})
					})
				} else if (item.text == "租房") {
					getlabel({
						type: 2
					}).then(res => {
						this.biaoqian = res.data.map(v => {
							v.text = v.name
							return v
						})
					})
				}
			},

			// 性别选择器
			sexbtn(index, item) {
				this.sex = item.sex
				this.currentindex4 = index
			},
			// 选择标签
			selectItem(item) {
				const index = this.selectbiaoqian.indexOf(item.id);
				if (index > -1) {
					this.selectbiaoqian.splice(index, 1)
				} else {
					this.selectbiaoqian.push(item.id)
				}
				let a = []
				this.biaoqian1.forEach(v => {
					if (this.selectbiaoqian.indexOf(v.id) !== -1) {
						a.push(v.text)
					}
				})
				this.lable = a.join("|")
			},

			shuruItem1(e) {
				if (e.id != "") {
					this.biaoqian1.push(e)
					this.$refs.baseLabel.zhi = '自定义'
				} else {
					return
				}
			},
			// 联系人电话
			phonitem(e) {
				this.userphone = e
			},
			// 联系人
			nameitem(e) {
				this.lastname = e
			},
			textareaitem(e) {
				this.remark = e.detail.value
			},
			// 上传信息
			upload() {
				let data = {
					type: this.type,
					contact_number: this.userphone,
					contact: this.lastname,
					label: this.lable,
					remark: this.remark
				}
				if (this.userphone != "" && this.lastname != "") {
					if (checkPhone(this.userphone)) {
						getMenu(data).then(res => {
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 1500
							})
							setTimeout(function() {
								uni.navigateBack({
								})
							}, 1500)
						})
					}
				} else {
					uni.showModal({
						title: "请输内容"
					})
				}
			},
		},
		components: {
			BaseContinput,
			BaseLabel
		},
		onShow() {
			let data = {
				type: this.types
			}
			getlabel(data).then(res => {
				this.biaoqian1 = res.data.map(v => {
					v.text = v.name
					return v
				})
			})
		}
	}
</script>

<style scoped lang="scss">
	.boxs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.cu-form-group {
		padding: 0 !important;
		display: flex !important;
		justify-content: space-between !important;
	}

	.plotbox {
		display: flex;
		margin-top: 66rpx;
		margin-left: 33rpx;
	}

	.plotboxs {
		display: flex;
		margin-top: 66rpx;
	}

	.left {
		white-space: nowrap;
	}

	.plot {
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		color: #000000;
	}

	.cekname {
		width: 90%;
		margin-left: 10rpx;
	}

	.show {
		margin-top: -28rpx;
		margin-left: 20rpx;
	}

	.hrs {
		margin-left: 24rpx;
	}

	.remark {
		font-size: 26rpx;
		color: #000000;
		font-family: MicrosoftYaHei;
		margin-left: 33rpx;
		margin-top: 50rpx;
	}

	textarea {
		width: 680rpx;
		height: 158rpx;
		background-color: #ffffff;
		border: solid 2rpx #bebebe;
		margin-left: 33rpx;
		padding: 10rpx;
		box-sizing: border-box;
		margin-top: 31rpx;
	}

	.upload {
		width: 700rpx;
		height: 90rpx;
		background-color: #fc7b63;
		border-radius: 10rpx;
		line-height: 90rpx;
		text-align: center;
		margin-left: 23rpx;
		margin-top: 41rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>
